<div id="homePage">
    <div class="mainPage" >
        <el-row>
            <el-col :span="24">
                <div class="main_head">数据统计</div>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="mar_bom_20">
            <el-col :span="8">
                <el-card class="box-card box-card-style">
                    <el-col :span="3">
                        <i class="icon iconfont icon-1"></i>
                    </el-col>
                    <el-col :span="8">
                        <div class="col_999 mar_bom_10">缴费用户数</div>
                        <div class="fs_20 col_333"><b class="bg_f44"></b>{{AllUserNumber}}</div>
                    </el-col>
                    <el-col :span="13">
                        <div class="col_999 mar_bom_10">今日新增缴费用户数</div>
                        <div class="fs_20 col_333"><b class="bg_f44"></b>{{TodayUserNumber}}</div>
                    </el-col>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="box-card box-card-style">
                    <el-col :span="3">
                        <i class="icon iconfont icon-yonghu"></i>
                    </el-col>
                    <el-col :span="8">
                        <div class="col_999 mar_bom_10">签约用户数</div>
                        <div class="fs_20 col_333"><b class="bg_00c192"></b>{{todayUser}}</div>
                    </el-col>
                    <el-col :span="13">
                        <div class="col_999 mar_bom_10">今日签约缴费用户数</div>
                        <div class="fs_20 col_333"><b class="bg_00c192"></b>{{todayCostUser}}</div>
                    </el-col>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="box-card box-card-style">
                    <el-col :span="3">
                        <i class="icon iconfont icon-money"></i>
                    </el-col>
                    <el-col :span="8">
                        <div class="col_999 mar_bom_10">交易总数</div>
                        <div class="fs_20 col_333"><b class="bg_fc720b"></b>{{AllPayNumber}}</div>
                    </el-col>
                    <el-col :span="13">
                        <div class="col_999 mar_bom_10">今日新增交易数</div>
                        <div class="fs_20 col_333"><b class="bg_fc720b"></b>{{TodayPayNumber}}</div>
                    </el-col>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20">
            <el-col :span="12">
                <el-card class="box-card box-card-style-big">
                    <el-col :span="12" class="col_999">
                        <b>总</b>
                        总交易金额
                    </el-col>
                    <el-col :span="12">
                        <div style="margin-top: 20px" class="fs_22 col_fc720b">
                            ¥{{AllPayMoney}}元
                        </div>
                    </el-col>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card box-card-style-big">
                    <el-col :span="12" class="col_999">
                        <b>今</b>
                        今交易金额
                    </el-col>
                    <el-col :span="12">
                        <div style="margin-top: 20px" class="fs_22 col_fc720b">
                            ¥{{TodayPayMoney}}元
                        </div>
                    </el-col>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="trend-chart">走势图</div>
            </el-col>
        </el-row>
        <el-row style="background-color: #fff;padding: 20px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
            <el-col :span="24">
                <el-button style="width: 100px;" class="btn-charts-total btn-charts" size="small" @click="loadTotalCharts">累计</el-button>
                <el-button style="width: 100px;"  class="btn-charts-add" size="small" @click="loadAddCharts">新增</el-button>
            </el-col>
            <el-col :span="24" style="margin: 20px 0;">
                <el-select @change="latelyCharts" v-model="lately" placeholder="请选择">
                    <el-option label="最近7天" value="7"></el-option>
                    <el-option label="最近15天" value="15"></el-option>
                    <el-option label="最近30天" value="30"></el-option>
                </el-select>
                <el-date-picker
                        @change="selectDate"
                        v-model="dates"
                        type="daterange"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-col>
            <el-col :span="24">
                <div v-show="isTotal"
                     v-loading="loadingCharts"
                     id="trend-chart"
                     style="width: 100%;height: 400px;"></div>
                <div v-show="isAdd"
                     v-loading="loadingAddCharts"
                     id="add-trend-chart"
                     style="width: 100%;height: 400px;"></div>
            </el-col>
        </el-row>

    </div>
</div>

<script>

    function isIE(){
        if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE9.0"){
            window.location.href="${basePath}test";
        }else{
        }
    }
    isIE();


    var homePage = new Vue({
        el:"#homePage",
        data:{
            todayUser:'0',
            todayCostUser:'0',
            AllUserNumber:'0',
            TodayUserNumber:'0',
            TodayPayNumber:'0',
            AllPayNumber:'0',
            TodayPayMoney:"0",
            AllPayMoney:'0',
            isShowEchartBox:false,
            loading:true,

            loadingCharts:true,// 累计loading
            loadingAddCharts:false,// 新增loading
            isTotal:true,// 显示累计图
            isAdd:false,// 显示新增图
            dates:[], // 日期选择
            lately:"30", // 天数下拉框

            options: [{
                value: '7',
                label: '七天'
            }, {
                value: '15',
                label: '十五天'
            }, {
                value: '30',
                label: '三十天'
            }],
            someDay: '30'

        },
        methods:{
            // 登录进来加载累计走势图（默认加载最近30天）
            loadCharts:function(){
                var kjChart = echarts.init(document.getElementById('trend-chart'));
                var option = {
                    color:['#ff4444','#00c192','#feb415','#00aaee'],
                    title: {
                        text: '累计折线图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['累计缴费用户数','累计签约用户数','累计交易总数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {

                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name:'',
                            type:'line',
                            data:[]
                        },
                    ]
                };
                kjChart.setOption(option);
                var options1 = {};
                sendService('${basePath}merchant/eCharts/geteCharts',options1,function (resDate) {
                    if(resDate.status == 'success'){
                        homePage.loadingCharts = false;
                        kjChart.setOption({
                            xAxis: {
                                data: resDate.t.date
                            },
                            series: resDate.t.series
                        });
                    }
                });
            },
            // 7、15、30change事件
            latelyCharts:function(){
                if(homePage.isTotal){
                    homePage.loadingCharts = true;
                    var kjChart = echarts.init(document.getElementById('trend-chart'));
                    var option = {
                        color:['#ff4444','#00c192','#feb415','#00aaee'],
                        title: {
                            text: '累计折线图'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['累计缴费用户数','累计签约用户数','累计交易总数']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {

                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name:'',
                                type:'line',
                                stack: '总量',
                                data:[]
                            },
                        ]
                    };
                    kjChart.setOption(option);
                    var options1 = {'lately':this.lately};//传参7、15、30
                    sendService('${basePath}merchant/eCharts/geteCharts',options1,function (resDate) {
                        if(resDate.status == 'success'){
                            homePage.loadingCharts = false;
                            kjChart.setOption({
                                xAxis: {
                                    data: resDate.t.date
                                },
                                series: resDate.t.series
                            });
                        }
                    });
                } else if(homePage.isAdd){
                    homePage.loadingAddCharts = true;
                    var kjAddChart = echarts.init(document.getElementById('add-trend-chart'));
                    var option = {
                        color:['#ff4444','#00c192','#feb415','#00aaee'],
                        title: {
                            text: '新增折线图'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['新增缴费用户数','新增签约用户数','新增交易总数']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {

                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name:'',
                                type:'line',
                                stack: '总量',
                                data:[]
                            },
                        ]
                    };
                    kjAddChart.setOption(option);
                    var options1 = {'lately':this.lately};//传参7、15、30
                    sendService('${basePath}merchant/eCharts/geteChartsCum',options1,function (resDate) {
                        if(resDate.status == 'success'){
                            homePage.loadingAddCharts = false;
                            kjAddChart.setOption({
                                xAxis: {
                                    data: resDate.t.date
                                },
                                series: resDate.t.series
                            });
                        }
                    });
                }
            },
            // 时间段选择
            selectDate:function(){
                if(homePage.isTotal){
                    homePage.loadingCharts = true;
                    var kjChart = echarts.init(document.getElementById('trend-chart'));
                    var option = {
                        color:['#ff4444','#00c192','#feb415','#00aaee'],
                        title: {
                            text: '累计折线图'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['累计缴费用户数','累计签约用户数','累计交易总数']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {

                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name:'',
                                type:'line',
                                stack: '总量',
                                data:[]
                            },
                        ]
                    };
                    kjChart.setOption(option);
                    if(homePage.dates != null){
                        var options = {'dates':homePage.dates.join(',')};//传参时间
                        sendService('${basePath}merchant/eCharts/geteCharts',options,function (resDate) {
                            if(resDate.status == 'success'){
                                homePage.loadingCharts = false;
                                kjChart.setOption({
                                    xAxis: {
                                        data: resDate.t.date
                                    },
                                    series: resDate.t.series
                                });
                            }
                        });
                    }else{
                        homePage.latelyCharts();
                    }

                }else if(homePage.isAdd){
                    homePage.loadingAddCharts = true;
                    var kjAddChart = echarts.init(document.getElementById('add-trend-chart'));
                    var option = {
                        color:['#ff4444','#00c192','#feb415','#00aaee'],
                        title: {
                            text: '新增折线图'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['新增缴费用户数','新增签约用户数','新增交易总数']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {

                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name:'',
                                type:'line',
                                stack: '总量',
                                data:[]
                            },
                        ]
                    };
                    kjAddChart.setOption(option);
                    if(homePage.dates != null){
                        var options1 = {'dates':homePage.dates.join(',')};//传参时间
                        sendService('${basePath}merchant/eCharts/geteChartsCum',options1,function (resDate) {
                            if(resDate.status == 'success'){
                                homePage.loadingAddCharts = false;
                                kjAddChart.setOption({
                                    xAxis: {
                                        data: resDate.t.date
                                    },
                                    series: resDate.t.series
                                });
                            }
                        });
                    }else{
                        homePage.latelyCharts();
                    }
                }
            },
            // 新增走势图
            loadAddCharts:function(){
                homePage.isTotal = false;
                homePage.isAdd = true;
                homePage.loadingAddCharts = true;
                var width = $("#trend-chart").width();
                var height = $("#trend-chart").height();
                $("#add-trend-chart").css("width", width).css("height", height);
                $(".btn-charts-add").addClass('btn-charts').siblings().removeClass('btn-charts');
//                        console.log($(".btn-charts-add").siblings());
//                        $(".btn-charts-total").removeClass('btn-charts');
                homePage.lately = '30';
                homePage.dates = [];
                var kjAddChart = echarts.init(document.getElementById('add-trend-chart'));
                var option = {
                    color:['#ff4444','#00c192','#feb415','#00aaee'],
                    title: {
                        text: '新增折线图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['新增缴费用户数','新增签约用户数','新增交易总数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {

                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name:'',
                            type:'line',
                            stack: '总量',
                            data:[]
                        },
                    ]
                };
                kjAddChart.setOption(option);
                var options = {};
                sendService('${basePath}merchant/eCharts/geteChartsCum',options,function (resDate) {
                    if(resDate.status == 'success'){
                        homePage.loadingAddCharts = false;
                        kjAddChart.setOption({
                            xAxis: {
                                data: resDate.t.date
                            },
                            series: resDate.t.series
                        });
                    }
                });
            },
            // 累计走势图
            loadTotalCharts:function(){
                homePage.isTotal = true;
                homePage.isAdd = false;
                homePage.loadingCharts = true;
                var width = $("#add-trend-chart").width();
                var height = $("#add-trend-chart").height();
                $("#trend-chart").css("width", width).css("height", height);
                $(".btn-charts-total").addClass('btn-charts').siblings().removeClass('btn-charts');
//                        $(".btn-charts-add").removeClass('btn-charts');
                homePage.lately = '30';
                homePage.dates = [];
                var kjChart = echarts.init(document.getElementById('trend-chart'));
                var option = {
                    color:['#ff4444','#00c192','#feb415','#00aaee'],
                    title: {
                        text: '累计折线图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['累计缴费用户数','累计签约用户数','累计交易总数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {

                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name:'',
                            type:'line',
                            stack: '总量',
                            data:[]
                        },
                    ]
                };
                kjChart.setOption(option);
                var options = {};
                sendService('${basePath}merchant/eCharts/geteCharts',options,function (resDate) {
                    if(resDate.status == 'success'){
                        homePage.loadingCharts = false;
                        kjChart.setOption({
                            xAxis: {
                                data: resDate.t.date
                            },
                            series: resDate.t.series
                        });
                    }
                });

            },
        },
        created:function(){
            var that = this;
                var options= {};
                sendService('${basePath}/merchant/bind/getUserNumber', options, function (resData) {
                    that.todayUser = resData.t;
                });
            var options1= {};
            sendService('${basePath}/merchant/bind/getTodayUserNumber', options1, function (resData) {
                that.todayCostUser = resData.t;
            });
            var options2= {};
            sendService('${basePath}/merchant/feeUserr/getAllUserNumber', options2, function (resData) {
                that.AllUserNumber = resData.t;
            });
            var options3= {};
            sendService('${basePath}/merchant/feeUserr/getTodayUserNumber', options3, function (resData) {
                that.TodayUserNumber = resData.t;
            });

            var options4= {};
            sendService('${basePath}/merchant/payment/getTodayPayNumber', options4, function (resData) {
                that.TodayPayNumber = resData.t;
            });

            var options5= {};
            sendService('${basePath}/merchant/payment/getAllPayNumber', options5, function (resData) {
                that.AllPayNumber = resData.t;
            });

            var options6= {};
            sendService('${basePath}/merchant/payment/getTodayPayMoney', options6, function (resData) {
                var totalCost = resData.t;
                that.TodayPayMoney = fmoney(totalCost, 2);
            });

            var options7= {};
            sendService('${basePath}/merchant/payment/getAllPayMoney', options7, function (resData) {
                var totalCost = resData.t;
               that.AllPayMoney = fmoney(totalCost, 2);

            });
        },
        mounted:function () {
           // this.showingEacher();
            this.loadCharts();

        }
    })

    /**
     * 格式化货币
     * @param s  需要格式化的货币金额
     * @param n  保留几位小数
     * @returns {string}
     */
    function fmoney(s, n)
    {
        n = n > 0 && n <= 20 ? n : 2;
        s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
        var l = s.split(".")[0].split("").reverse(),
            r = s.split(".")[1];
        t = "";
        for(i = 0; i < l.length; i ++ )
        {
            t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
        }
        return t.split("").reverse().join("") + "." + r;
    }
</script>

<style scoped>
    #homePage .el-loading-mask{
        z-index: 2002;
    }
    #homePage .iconfont{
        display: inline-block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 28px;
        height: 28px;
        position: relative;

    }
    #homePage .el-card__body .icon:before{
        /*display: inline-block;*/
        /*width: 20px;*/
        /*height: 20px;*/
       color: #fff;
        font-size: 18px;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
    .main_head {
        font-size: 16px;
        color: #999;
        margin-bottom: 10px;
    }
    .trend-chart {
        font-size: 16px;
        padding-top: 20px;
        color: #999;
        margin-bottom: 10px;
    }

    .box-card-style {
        height: 100px;
        text-align: center;
    }

    .box-card-style b {
        width: 6px;
        height: 6px;
        display: inline-block;
        margin-right: 10px;
        border-radius: 50%;
        vertical-align: middle;
    }

    .el-card__body {
        padding: 20px 0;
    }

    .box-card-style .icon {
        font-size: 24px;
        padding: 2px;
        border-radius: 50%;
        background: #ff4444;
        color: #fff;
    }

    .box-card-style .icon-1 {
        background: #ff4444;
    }

    .box-card-style .icon-yonghu {
        background: #00c192;
    }

    .box-card-style .icon-money {
        background: #fc720b;
    }

    .box-card-style-big {
        height: 100px;
    }

    .box-card-style-big b {
        width: 24px;
        height: 24px;
        background: #00AAEE;
        color: #fff;
        border-radius: 50%;
        padding: 2px;
        display: inline-block;
        text-align: center;
        line-height: 24px;
    }

</style>
